<template>
  <div music>
    <audio autoplay loop controls id="myAudio">
      <source :src="'https://music.163.com/song/media/outer/url?id='+musicID+'.mp3'">
    </audio>
  </div>
</template>

<script>

export default {
  created() {
    // console.log(myAudio);
    this.musicTimer = setInterval(() => {
        console.log('object');
    }, 1000);
  },
  beforeDestroy() {
      window.clearInterval(this.musicTimer);
      this.musicTimer = null;
  },
  data() {
    return {
      isPlay: true,
      musicTimer: null,
      musicID: 1296706520
    };
  },
  computed: {
    music_isPlay() {
        // var audio = document.getElementById("myAudio");
        // console.log(audio);
        // console.log('computed');
      return this.$store.state.isPlay;
    }
  },
  watch: {
    music_isPlay: function(){
        var audio = document.getElementById("myAudio");
        if (this.music_isPlay) {
            audio.play();
        } else {
            audio.pause();
        }
        console.log("watch")
    }
  },
  methods: {

  }
};
</script>


